<script setup lang="ts">
import {Loading} from '@element-plus/icons-vue'
import {Camera, Group, Object3D} from "three";
import {TresControl, TresScene} from "@tresjs/core/dist/src/types";

import ModelEdit from './component/scene/ModelEdit.vue'
import ConfigTool from './component/tool/config/ConfigTool.vue'
import EditTool from './component/tool/edit/EditTool.vue'

import {ThemeApi, ThemeVO} from "@/api/pb/theme";
import {useTagsView} from "@/hooks/web/useTagsView";
import {useLoaderStorage} from "@/store/modules/web3d/loader";


const route = useRoute()
const router = useRouter()
const message = useMessage()
const tagsView = useTagsView()

const loader = useLoaderStorage()

// 场景、相机、控制器
// 暴露给 Tool 用
const scene = shallowRef<TresScene>()
provide('scene', scene)
const camera = shallowRef<Camera>()
provide('camera', camera)
const controls = shallowRef<TresControl>()
provide('controls', controls)

// 默认网格大小
const gridSideLength = 16
provide('gridSideLength', gridSideLength)

// 主题数据
const theme = ref<ThemeVO>()
provide('theme', theme)

// 墙体 Group
const wallGroup = new Group()
wallGroup.name = 'wallGroup'
provide('wallGroup', wallGroup)
// 内容 Group
const contentGroup = new Group()
contentGroup.name = 'contentGroup'
provide('contentGroup', contentGroup)
// 当前编辑对象
const editObject = shallowRef<Object3D | null>(null)
provide('editObject', editObject)
// 当前编辑模式
const editMode = ref('translate')
provide('editMode', editMode)
// 是否正在操作控制器
const controlling = ref(false)
provide('controlling', controlling)

/** 获取主题数据 */
const getTheme = async () => {
  const id = Number(route.params.id)
  if(!id) {
    message.warning('主题编号不能为空！')
    tagsView.closeCurrent()
    router.replace({name: 'Web3dTheme'})
    return
  }

  const data = await ThemeApi.getTheme(id)
  if(!data) {
    message.warning('主题不存在！')
    tagsView.closeCurrent()
    router.replace({name: 'Web3dTheme'})
    return
  }

  if (!data.modelMeta) data.modelMeta = {}

  theme.value = data
}

// 统一顺序执行
await getTheme()


onBeforeRouteLeave((to, from) => {
  loader.reset()
  // 刷新就不要删除了
  if(to.name  !== from.name) {
    tagsView.closeCurrent()
  }
})
</script>

<template>
  <Suspense>
    <el-row v-if="theme" v-show="!loader.isLoading" :gutter="20">
      <el-col :span="4">
        <ContentWrap class="h-full">
          <el-scrollbar>
            <ConfigTool v-if="!loader.isLoading" />
          </el-scrollbar>
        </ContentWrap>
      </el-col>
      <el-col :span="14">
        <ContentWrap>
          <ModelEdit />
        </ContentWrap>
      </el-col>
      <el-col :span="6">
        <ContentWrap class="h-full w-full">
          <EditTool />
        </ContentWrap>
      </el-col>
    </el-row>
  </Suspense>

  <ContentWrap v-show="loader.isLoading">
    <div class="flex items-center justify-center text-blue" style="height: 810px;">
      <div class="text-2xl " >
        <div class="flex">
          <el-icon class="animate-spin mr-4"><Loading /></el-icon>
          <div>模型加载中······</div>
        </div>
        <div class="text-center">{{loader.progress}}</div>
      </div>
    </div>
  </ContentWrap>
</template>

<style scoped lang="scss">

</style>
